import React, { useRef } from 'react'
import T from 'prop-types'
import './index.scss' 
import {message} from '../../../../components/message'

// 对话输入框
export default function MessageInputBox(props) {
  const { onMessageSend, placeholder } = props
  const textRef = useRef()

  const sendMessage = () => {
    const { value } = textRef.current
     console.log(value.trim().length,'长度')
    if (!value || value.trim().length === 0) {
      message('不能发送空的评论哦')
      return
    }
    if (value.trim().length > 512) {
      console.log(value.trim().length)
      message('内容超长，请分条发送')
      return

    }
    textRef.current.style.height = 'auto'
    onMessageSend &&
      onMessageSend({
        value: value,
      })

    textRef.current.value = ''
  }

  return (
    <div className={'message-input-box'}>
      <textarea
        ref={textRef}
        placeholder={placeholder}
        className={'text-input'}
        rows="1"
        enterkeyhint={'send'}
        onKeyUp={({ target }) => {
          textRef.current.style.height = 'auto'
          textRef.current.style.height = target.scrollHeight + 'px'
        }}
        onKeyDown={(event) => {
          if (event.keyCode === 13) {
            if (event.ctrlKey) {
              textRef.current.value += '\n'
              return event.preventDefault()
            }
            sendMessage()
            event.preventDefault()
          }
        }}
      />
      <button onClick={sendMessage}>发送</button>
    </div>
  )
}

MessageInputBox.propTypes = {
  onMessageSend: T.func,
  placeholder:T.string,
}
